<template>
    <el-dialog v-model="show" title="收款详情" width="35%" align-center @close="handleClose">
        <el-row>
            <el-col :span="8">
                对账日期： {{ props.initList.reconciliationDate }}
            </el-col>
            <el-col :span="8">
                付款方名称： {{ props.initList.payer }}
            </el-col>
            <el-col :span="8">
                款项来源：{{ props.initList.source == 0 ? '微定制订单' : props.initList.source == 1 ? '销售单' : '' }}
            </el-col>
            <el-col :span="8">
                对账金额： ￥{{ props.initList.reconciliationAmount }}
            </el-col>
            <el-col :span="8">
                收款金额： ￥{{ props.initList.collectedAmount }}
            </el-col>
            <el-col :span="8">
                坏账金额： ￥{{ props.initList.badDebt }}
            </el-col>
            <el-col :span="8">
                欠款金额： ￥{{ props.initList.pendingCollect }}
            </el-col>
            <el-col :span="8">
                回款状态：
                <span v-if="props.initList.collectStatus == 0" style="color: #F75F51;">未回款</span>
                <span v-else-if="props.initList.collectStatus == 1" style="color: #E6A33F;">部分回款</span>
                <span v-else-if="props.initList.collectStatus == 2" style="color: #68C23D;">已回款</span>
            </el-col>
        </el-row>

        <el-table class="mt20" :data="props.paymentDetails" style="width: 100%">
            <el-table-column prop="paymentDate" label="收款日期" />
            <el-table-column prop="payer" label="收款账号" />
            <el-table-column prop="paymentAmount" label="收款金额" />
            <el-table-column prop="updateByName" label="操作人" />
            <el-table-column prop="paymentInfo" label="收款信息" />
        </el-table>

    </el-dialog>
</template>

<script setup lang="ts">
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const props = defineProps(['visible', 'initList', 'paymentDetails']);
const emits = defineEmits(['submit', 'close']);

const show = ref(false);

watch(() => props.visible, async (newValue) => {
    show.value = newValue
    if (newValue) {
    }
}, { deep: true });

const handleClose = () => {
    emits('close');
};

onMounted(() => {
})
</script>

<style lang="scss" scoped>
.el-col {
    margin-bottom: 10px;
    color: #000;
}
</style>